<template>
  <div class="news-view">
    <loading :show="loading" />
    <arrow />
    <v-title :title="detail.title" :is-center="false" />
    <div class="view">
      <div class="date">发布时间: {{ detail.create_time }}</div>
      <div v-if="detail.image && false" class="image" style="margin: 10px 0">
        <img v-lazy="detail.image.thumbnail_path" v-if="detail.image"/>
      </div>
      <div class="text" v-html="detail.inText"></div>
      <ul class="images" v-if="detail.inImages && detail.inImages.length > 0">
        <li
          v-for="(item, index) in detail.inImages"
          :key="index"
        >
          <div class="image">
            <img v-lazy="item" />
          </div>
        </li>
      </ul>
      <div class="footer">
        <div class="time">
          浏览次数: {{ +detail.view + +detail.view_virtual }}
        </div>
        <div class="fav" @click="fav">
          <i class="cubeic-like" :class="{'active' : isFav}"></i>
          <span>收藏</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title'
import Arrow from '@/components/Arrow'
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import scroll from '@/util/scroll'
export default {
  name: 'NewsView',
  components: {
    'v-title': Title,
    Arrow,
    Loading,
  },
  data() {
    return {
      loading: false,
      detail: {
        title: this.$route.meta.title || ''
      },
      isFav: false
    }
  },
  methods: {
    fetch() {
      this.loading = true
      api.Article.view({ id: this.$route.params.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        Object.assign(this.detail, { ...data })
      }).finally(() => {
        this.loading = false
      })
    },
    async view() {
      await api.Article.add({ id: this.$route.params.id })
    },
    checkLogin(isFav = false) {
      return new Promise(resolve => {
        api.Exec.isLogin().then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.isLogin) {
            resolve()
          } else {
            if (!isFav) {
              return this.$createDialog({
                type: 'confirm',
                content: '登录过期,是否重新登录',
                onConfirm: () => {
                  this.$router.push('/user/login')
                }
              }).show()
            }
          }
        })
      })
    },
    checkFav() {
      this.checkLogin(true).then(() => {
        // Warn:
        // not wait props detail
        const id = this.$route.params.id
        // const id = this.detail.id
        api.Article.checkFavorite({ id }).then(response => {
          let { data } = response
          data = base64.parse(data)
          this.isFav = !!data.is
        })
      })
    },
    fav() {
      this.checkLogin().then(() => {
        const id = this.detail.id
        if (!this.isFav) {
          api.Article.createFav({ id }).then(() => {
            this.$createToast({
              type: 'correct',
              txt: '收藏成功',
              time: 500
            }).show()
            this.isFav = true
          })
        } else {
          api.Article.removeFav({ id }).then(() => {
            this.$createToast({
              type: 'correct',
              txt: '取消成功',
              time: 500
            }).show()
            this.isFav = false
          })
        }
      })
    },
  },
  activated () {
    // this.fetch()
    // scroll.toTop()
  },
  created() {
    this.fetch()
    this.view()
    this.checkFav()
    scroll.toTop()
  }
}
</script>

<style scoped lang="stylus">
.news-view
  padding-top 45px
  padding-bottom 20px
  .view
    margin 10px
    padding 10px
    background white
    border-radius 10px
    .date
      color #ccc
      height 30px
      line-height 30px
    .text
      margin 15px 0
    .footer
      display flex
      justify-content space-around
      padding 10px 0
      .time
        text-align left
      .fav
        i
          color 50px
          margin-right 5px
          &.active
            color red

.view
  ::v-deep
    video
      margin 10px 0
</style>
